<template>
  <PageWrapper v-loading="loadingRef">
    <alert message="使用说明" type="info" style="margin-bottom: 10px">
      <template #description>
        <span v-if="tab_id == 2"
          >七牛云开通方法：<a target="_blank" href="https://doc.crmeb.com/pro/crmebprov2/1215"
            >点击查看</a
          ></span
        >
        <span v-if="tab_id == 3"
          >阿里云oss开通方法：<a target="_blank" href="https://doc.crmeb.com/pro/crmebprov2/1213"
            >点击查看</a
          ></span
        >
        <span v-if="tab_id == 4"
          >腾讯云oss开通方法：<a target="_blank" href="https://doc.crmeb.com/pro/crmebprov2/1214"
            >点击查看</a
          ></span
        >
        <span v-if="tab_id == 5"
          >京东云cos开通方法：<a target="_blank" href="https://doc.crmeb.com/single/v5/8522"
            >点击查看</a
          ></span
        >
        <span v-if="tab_id == 6"
          >华为云cos开通方法：<a target="_blank" href="https://doc.crmeb.com/single/v5/8523"
            >点击查看</a
          ></span
        >
        <span v-if="tab_id == 7"
          >天翼云cos开通方法：<a target="_blank" href="https://doc.crmeb.com/single/v5/8524"
            >点击查看</a
          ></span
        >
        <br />
        <span>第一步： 添加【存储空间】（空间名称不能重复）</span><br />
        <span>第二步： 开启【使用状态】</span><br />
        <template v-if="tab_id == 2">
          <span style="color: red">第三步（必选）： 选择云存储空间列表上的修改【空间域名操作】</span
          ><br />
          <span style="color: red">
            第四步（必选）：
            选择云存储空间列表上的修改【CNAME配置】，打开后复制记录值到对应的平台解析 </span
          ><br />
        </template>
        <template v-else>
          <span>第三步（可选）： 选择云存储空间列表上的修改【空间域名操作】</span>
          <span
            ><br />
            第四步（可选）：
            选择云存储空间列表上的修改【CNAME配置】，打开后复制记录值到对应的平台解析 </span
          ><br />
        </template>
      </template>
    </alert>
    <div class="mb-4">
      <a-button class="mr-2" type="primary" @click="addStorageBtn">添加云空间</a-button>
      <a-button type="success" @click="synchro(tab_id)">同步存储空间</a-button>
      <a-button style="float: right" @click="addConfigBtn">修改配置信息</a-button>
    </div>

    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'clarity:note-edit-line',
                onClick: handleEdit.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <CloudSettingModal @register="register1" @success="handleSuccess" />
    <CloudConfigModal @register="register2" @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts">
  import { Alert } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import { defineComponent, inject, watch, shallowRef, ComponentOptions, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { createPrompt } from '@/components/Prompt';
  import { PageWrapper } from '@/components/Page';
  import {
    deleteStorage,
    getStorageList,
    getSyncsStorage,
    getUpdateStorageDomain,
    updateStorageDomain,
  } from '@/api/app/setting';
  import { columns } from './data';
  import CloudSettingModal from './CloudSettingModal.vue';
  import CloudConfigModal from './CloudConfigModal.vue';

  export default defineComponent({
    name: 'SettingConfigStorage',
    components: {
      BasicTable,
      TableAction,
      Alert,
      CloudSettingModal,
      CloudConfigModal,
      PageWrapper,
    },
    setup() {
      const loadingRef = ref(false);
      const tab_id: any = inject('tab_id');
      const { createMessage: msg } = useMessage();
      // const [registerModal, { openModal }] = useModal();
      const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
      const [register1, { openModal: openModal1 }] = useModal();
      const [register2, { openModal: openModal2 }] = useModal();

      const [registerTable, { reload }] = useTable({
        api: getStorageList,
        beforeFetch: (res) => {
          res.type = tab_id.value;
          return res;
        },
        columns,
        showIndexColumn: true,
        showTableSetting: false,
        tableSetting: { fullScreen: false },
        bordered: true,
        actionColumn: {
          width: 160,
          title: '操作',
          dataIndex: 'action',
        },
      });

      // 添加
      function addStorageBtn() {
        currentModal.value = CloudSettingModal as ComponentOptions;
        openModal1(true, {
          isUpdate: false,
        });
      }

      // 同步
      async function synchro(tab_id) {
        loadingRef.value = true;
        await getSyncsStorage(tab_id)
          .then(() => {
            msg.success('同步成功');
            reload();
          })
          .catch(() => {});
        setTimeout(() => {
          loadingRef.value = false;
        });
      }

      // 配置
      function addConfigBtn() {
        currentModal.value = CloudConfigModal as ComponentOptions;
        openModal2(true, {
          isUpdate: false,
        });
      }

      async function handleEdit(record: Recordable) {
        const resData = await getUpdateStorageDomain(record.id);
        createPrompt({
          title: '修改空间域名',
          required: true,
          label: '空间域名',
          defaultValue: resData.domain,
          onOK: async (domain: string) => {
            await updateStorageDomain(record.id, { domain })
              .then(() => {
                msg.success('修改成功');
                reload();
              })
              .catch(() => {});
          },
          inputType: 'Input',
        });
      }

      function handleDelete(record: Recordable) {
        deleteStorage(record.id)
          .then(() => {
            msg.success('删除成功');
            reload();
          })
          .catch(() => {});
      }

      function handleSuccess() {
        reload();
      }

      watch(
        () => tab_id.value,
        async (value) => {
          console.log(value, '121212');
        },
        { deep: true },
      );

      return {
        tab_id,
        registerTable,
        addStorageBtn,
        synchro,
        addConfigBtn,
        handleEdit,
        handleDelete,
        register1,
        register2,
        handleSuccess,
        loadingRef,
      };
    },
  });
</script>
<style lang="less" scoped>
  ::v-deep .vben-page-wrapper-content {
    margin: 0;
  }

  ::v-deep .ant-table-wrapper {
    padding: 0;
  }
</style>
./base/data
